<template>
  <div class="roof">

    <!--S顶部-->
    <div class="top"
         :style="{height:systemInfo.statusBarHeight+'px'}"
    ></div>
    <!--S顶部-->

    <!--S胶囊-->
    <div class="capsule"
         v-if="showCapsule"
         :style="{height:capsule_height+'px','line-height':capsule_height+'px'}"
         >
      <div class="title">{{title}}</div>

      <!--S页面返回按钮和主页按钮-->
      <div
        v-if="showLeftCapsule"
        class="router-handle"
        :style="{width:capsulePosition.width+'px',height:capsulePosition.height+'px'}"
      >
        <div class="go-back" @click="goBack"><i class="iconfont icon-fanhui"></i></div>
        <div class="go-home" @click="goHome"><i class="iconfont icon--"></i></div>
      </div>
      <!--E页面返回按钮和主页按钮-->

    </div>
    <!--E胶囊-->
  </div>
</template>

<script>
  import store from '../../store'
  export default {
    data () {
      return {
        // 胶囊区域的高度
        capsule_height: 50
      }
    },
    props: {
      // 是否显示胶囊
      'showCapsule': {
        type: Boolean,
        default: true
      },
      // title
      title: {
        type: String,
        default: ''
      },
      // 是否显示左胶囊
      'showLeftCapsule': {
        type: Boolean,
        default: false
      }
    },
    computed: {
      systemInfo () {
        return store.state.systemInfo
      },
      capsulePosition () {
        return store.state.capsule
      }
    },
    created () {
      this.setCapsuleHeight()
    },
    methods: {
      // Run
      /**
       * 设置胶囊高度
       */
      setCapsuleHeight () {
        this.capsule_height = this.capsulePosition.height + ((this.capsulePosition.top - this.systemInfo.statusBarHeight) * 2)
      },

      // Handle
      /**
       * 返回上一页
       */
      goBack () {
        mpvue.navigateBack()
      },
      /**
       * 回首页
       */
      goHome () {
        mpvue.switchTab({url: '/pages/home/main'})
      }
    }
  }
</script>

<style scoped lang="less" src="./roof.less"></style>
